let DetailsTemplate = `
<div class="container">
   <div class="row">
    <div class="col">
      <h1>{{$route.params.id}} 一共完成任务 {{count}}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col"><h3>从 {{start_date}} 到 {{end_date}} </h3></div>
  </div>
  <hr/>
  <div class="row">
    <div class="col-3" v-for="item in items">{{item.created_date}}</div>
   
  </div>
</div>

`

const Details = Vue.component('details', {
    template:DetailsTemplate,
    data (){
        return {start_date:"", end_date:"", count: 0, items:[]}
    },
    created () {
        this.fetchData()
    },
    methods:{
        fetchData(){
            $.getJSON("/api/alive/one", {id: this.$route.params.id},(data)=>{
                this.count = data.count
                this.start_date = data.start_date
                this.end_date = data.end_date
            })
            $.getJSON("/api/alive/one-records", {id: this.$route.params.id}, (data)=>{
                this.items = data
            })
        }
    }

});